<!DOCTYPE html>
<html>

  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="description" content="AndroidSVG : SVG rendering library for Android">

    <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">

    <title>AndroidSVG</title>
  </head>

  <body>

    <!-- HEADER -->
    <div id="header_wrap" class="outer">
        <header class="inner">
          <a id="forkme_banner" href="https://github.com/BigBadaboom/androidsvg">View on GitHub</a>

          <a href="index.html"><img id="project_logo" src="images/AndroidSVG_logo.svg" title="AndroidSVG logo"/></a>
          <h1 id="project_title">AndroidSVG</h1>
          <h2 id="project_tagline">SVG rendering library for Android</h2>

        </header>
    </div>

    <!-- MAIN CONTENT -->
    <div id="main_content_wrap" class="outer">
      <div class="inner">
        <nav>
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="download.html">Download</a></li>
            <li><a href="release_notes.html">Release Notes</a></li>
            <li><a href="doc/index.html">Javadoc</a></li>
            <li><a href="documentation.html">Documentation</a></li>
            <li><a href="svg_implementation_details.html">SVG Implementation</a></li>
            <li><a href="faq.html">FAQ</a></li>
            <li><a href="known_issues.html">Known Issues</a></li>
            <li><a href="report_bugs.html">Report a bug</a></li>
            <li><a href="mailto:androidsvgfeedback@gmail.com">Contact the author</a></li>
          </ul>

          <p><em><a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a></em></p>

          <p><a href="https://twitter.com/AndroidSVG"><img src="images/twitter.png"></a></p>
        </nav>
        <section id="main_content">
        <h1><a id="androidsvg" class="anchor" href="#androidsvg" aria-hidden="true"><span class="octicon octicon-link"></span></a>How to change colours at render time</h1>




<p><strong>The feature requires version 1.3 or later.</strong></p>

<p>
Version 1.3 adds the ability to apply extra custom CSS while rendering an SVG.  The exact method depends on whether you are rendering yourself, or using the SVGImageView custom widget.
</p>

<h2>When rendering yourself</h2>

<p>You can provide extra CSS rules via the <code>RenderOptions</code> parameter to the <code>SVG.renderTo<em>X</em>()</em></code> methods.</p>

<pre class="prettyprint">
String  blueEyes = "#eyes { fill: blue; }";

RenderOptions  renderOpts = RenderOptions.create().css( blueEyes );
svg.renderToCanvas(bmcanvas, renderOpts);
</pre>


<h2>When using SVGImageView</h2>

<p>You can use the <code>css</code> custom attribute to provide extra CSS</p>

<pre class="prettyprint">
&lt;com.caverock.androidsvg.SVGImageView
    android:id="@+id/imageView1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:svg="my_svg_file.svg" /&gt;
    app:css="rect.red { fill: red; } path:last-child { stroke: blue; }" /&gt;
</pre>

<p>Or you can do it in code by calling the <code>SVGImageView.setCSS()</code> method.</p>

<pre class="prettyprint">
SVGImageView  svgImageView = (SVGImageView) findViewById(R.id.my_svg)
svgImageView.setCSS("rect:nth-child(odd) { fill: green; }");
</pre>



        </section>
      </div>
    </div>

    <!-- FOOTER  -->
    <div id="footer_wrap" class="outer">
      <footer class="inner">
        <p class="copyright">AndroidSVG maintained by <a href="https://github.com/BigBadaboom">Paul LeBeau</a></p>
        <p>Published with <a href="https://pages.github.com">GitHub Pages</a></p>
      </footer>
    </div>

  </body>
</html>
